@import (reference) "lib/bootstrap_mixins.less";
@import (reference) "lib/mixins";
@import (reference) "lib/variables";

.hud {

  @system_font: "lucida grande", "Segoe UI" , "Helvetica Neue", Helvetica, Arial, sans-serif;
  @hud_w: 300px;
  @hud_header_h: 19px;
  @hud_bg: rgba(43,43,43, .85);
  @hud_border_radius: 8px;

  width: @hud_w;
  .box-shadow(0 4px 8px rgba(0,0,0,.4));
  border-radius: @hud_border_radius;
  font-family: @system_font;
  font-size: 12px;
  line-height: 16px;
  z-index: 9999;

  .hud_header {
    position: relative;
    color: #fff;
    text-align: center;
    height: @hud_header_h;
    line-height: @hud_header_h;
    border-radius: @hud_border_radius @hud_border_radius 0 0;
    .box-sizing('border-box');
    .user-select(none);
    cursor: default;
    background: -moz-linear-gradient(top,  rgba(142,142,142,0.91) 0%, rgba(119,119,119,0.88) 6%, rgba(110,110,110,0.88) 11%, rgba(89,89,89,0.87) 50%, rgba(73,73,73,0.85) 56%, rgba(73,73,73,0.85) 100%);
    background: -webkit-linear-gradient(top,  rgba(142,142,142,0.91) 0%,rgba(119,119,119,0.88) 6%,rgba(110,110,110,0.88) 11%,rgba(89,89,89,0.87) 50%,rgba(73,73,73,0.85) 56%,rgba(73,73,73,0.85) 100%);
    background: linear-gradient(to bottom,  rgba(142,142,142,0.91) 0%,rgba(119,119,119,0.88) 6%,rgba(110,110,110,0.88) 11%,rgba(89,89,89,0.87) 50%,rgba(73,73,73,0.85) 56%,rgba(73,73,73,0.85) 100%);

    .close {
      position: absolute;
      right: 4px;
      top: 3px;
      color: rgba(188,188,188,.95);
      font-size: 12px;
      line-height: 14px;
      display: block;
      opacity: 1;
      text-shadow: none;
      float: none;
      cursor: pointer;

      &:hover {
        color: rgba(255,255,255,.97);
        text-decoration: none;
      }
    }
  }

  .hud_body {
    border-radius: 0 0 @hud_border_radius @hud_border_radius;
    border: 1px solid rgba(79,79,79,.87);
    border-top: 0;
    .background-clip(border-box);
    .box-sizing('border-box');
    background-color: @hud_bg;
    padding: 14px;
    color: #fff;
    min-height: 100px;
  }

  .hud_box {
    margin-bottom: 8px;

    label {
      margin-bottom: -4px;
      font-weight: normal;
      font-size: 12px;
      line-height: 13px;

      &.checkbox {
        input {
          margin-top: 0;
        }
      }
    }
  }

  input[type=text], input[type=number] {
    background: rgba(255,255,255,0.1);
    color: white;
    width: 36px;
    height: 18px;
    font-size: 10px;
    line-height: 11px;
    padding: 0 3px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.5);
    margin-bottom: 0;
  }

  input[type=range] {
    -webkit-appearance: none;
    border: 0;
    height: 4px;
    .box-shadow(inset 0 0 0 1px rgba(255,255,255,0.5));
    background-color: rgba(255,255,255,.33);
    border-radius: 10px;
    .background-clip(padding-box);
    .box-sizing('border-box');
    width: 220px;
    outline: none;

    &[disabled] {
      opacity: 0.5;

      &::-webkit-slider-thumb {
        background-image: url();
      }
      &::-moz-range-thumb {
        background-image: url();
      }
    }

    &.lightness_slider {

      #gradient > .horizontal(#000, #fff);
      background-color: transparent;
    }

    &.saturation_slider {
      #gradient > .horizontal(#808080, #f00);
      background-color: transparent;
    }

    &.hue_slider {
      background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
      background-color: transparent;
    }

    &::-moz-range-track {
      // height: 4px;
      border-radius: 10px;
      border: 0;
      // .background-clip(padding-box);
      // .box-sizing('border-box');
      background-color: transparent;
      width: 220px;
      outline: none;
      padding: 0;
      margin: 0;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      position: relative;
      top:1px;
      width: 13px;
      height: 14px;
      background-image: url();
    }

    &::-moz-range-thumb {
      background-color: transparent;
      position: relative;
      border-radius: 0;
      border: 0;
      top:1px;
      width: 13px;
      height: 14px;
      background-image: url();
    }

    &::-moz-focus-outer {
      border: 0;
    }

  }

  .hud_btn {
    display: inline-block;
    color: #fff;
    border: 1px solid #c3c7ce;
    border-radius: 50px;
    padding: 0 18px;
    text-decoration: none;
    background: -moz-linear-gradient(top,  rgba(73,73,75,.9) 0%, rgba(63,63,65,.9) 33%, rgba(39,39,39,.9) 100%);
    background: -webkit-linear-gradient(top,  rgba(73,73,75,.9) 0%,rgba(63,63,65,.9) 33%,rgba(39,39,39,.9) 100%);
    background: linear-gradient(to bottom,  rgba(73,73,75,.9) 0%,rgba(63,63,65,.9) 33%,rgba(39,39,39,.9) 100%);
    .box-shadow(0 1px 3px rgba(0,0,0,.6));
    cursor: pointer;
    .user-select(none);

    &:active {
      #gradient > .vertical(#adb0b4, #818387);
      .box-shadow(0 1px 3px rgba(0,0,0,.8));
    }
  }

  hr {
    margin: 14px 0;
    border: 0;
    border-top:    1px solid rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
}
